<template>
    <el-tabs type="card">
        <el-tab-pane label="园区决策分析分析" >
            <el-row id='searchArea' height='10%' width='100%'>
                <el-col :span="1"><label >起始时间:</label></el-col>
                <el-col :span="3"><el-date-picker v-model="startTime" type="date" placeholder="选择日期"></el-date-picker></el-col>
                <el-col :span="1" :offset="1"><label >结束时间:</label></el-col>
                <el-col :span="3" ><el-date-picker v-model="endTime" type="date" placeholder="选择日期"></el-date-picker></el-col>
                <el-col :span="1" :offset="1"><button @click="searchData()">查询</button></el-col>
            </el-row>
            <el-row id='departmentHistryArea' height='30%' width='100%'>
                <div width='100%'>
                    <u style="background:green;">园区历史流量分析</u>|<u>园区历史负荷分析</u>
                    <!-- <histryMap :searcherId="companyId" :searcherType="companyType" :graphicTitle="comoanyName" :graphicWidth="graphicWidth" :graphicHeight="graphicHeight"></histryMap> -->
                    <dynamicGraphic :graphicWidth="graphicWidth" :graphicHeight="graphicHeight" :dynamicDatas="dynamicDatas"></dynamicGraphic>
                    <!-- <pieGraphic :searcherId="companyId" :graphicTitle="comoanyName" :graphicWidth="graphicWidth" :graphicHeight="graphicHeight"></pieGraphic> -->
                </div>
            </el-row>
            <el-row id='companyHistryArea' height='30%' width='100%'>
                <div width='100%'>
                    园区企业用量占比分析：
                    <el-row :span='24'>
                        <el-col :span="6">
                            饼图
                        </el-col>
                        <el-col :span="18">
                            报表
                        </el-col>
                    </el-row>
                </div>
            </el-row>
            <el-row id='companyTotalCalArea' height='30%' width='100%'>
                <div>
                    <u style="background:green;">园区企业历史流量分析</u>|<u>园区企业历史负荷分析</u>
                    <br>
                    柱状图
                </div>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="企业决策分析分析" height='30%' width='100%'>
            <el-row id='searchArea' height='10%' width='100%'>
                <el-col :span="1"><label >起始时间:</label></el-col>
                <el-col :span="3"><el-date-picker v-model="startTime" type="date" placeholder="选择日期"></el-date-picker></el-col>
                <el-col :span="1" :offset="1"><label >结束时间:</label></el-col>
                <el-col :span="3" ><el-date-picker v-model="endTime" type="date" placeholder="选择日期"></el-date-picker></el-col>
                <el-col :span="1" :offset="1"><button>查询</button></el-col>
            </el-row>
            <el-row id='departmentHistryArea' height='30%' width='100%'>
                <div width='100%'>
                    <u style="background:green;">企业历史流量分析</u>|<u>企业历史负荷分析</u><br>
                    折线图
                </div>
            </el-row>
            <el-row id='companyHistryArea' height='30%' width='100%'>
                <div width='100%'>
                    <u style="background:green;">企业分时流量分析</u>|<u>企业分时负荷分析</u>
                    <br>
                    柱状图
                </div>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import TemplateLineGraphic from './templateLineGraphic'
    import TemplateDynamicLineGraphic from './templateDynamicLineGraphic'
    import TemplatePieGraphic from './templatePieGraphic'
    import { getToday,getOneMonthAge,getOneYearAgo,dateFormatString,dateFormatFullString } from "@/util/util";
    export default{
        data(){
            return {
                startTime:'',
                endTime:'',
                companyId:100086,
                companyType:'company',
                comoanyName:'全国实时流量',
                graphicWidth:1200,
                graphicHeight:400,
                dynamicDatas:[],
                timer:null,
            }
        },
        components:{
            'histryMap':TemplateLineGraphic,
            'dynamicGraphic':TemplateDynamicLineGraphic,
            'pieGraphic':TemplatePieGraphic,
        },
        beforeMount() {
            /**
             * 传入动态图片的数据需要在mounted函数执行前初始化完成
             */
            this.initDatas();
        },
        mounted() {
            this.setTimer();
        },
        methods:{
            initDatas(){
                this.startTime = getToday();
                this.endTime = new Date();
                var split = (this.endTime - this.startTime)/( 5 * 60 * 1000);
                var tempTime = this.startTime;
                for(var i=1;i<split;i++){
                    this.dynamicDatas.push({'time':dateFormatFullString(tempTime),'value':parseInt(1000 + Math.random() * 200 - 100)});
                    tempTime = new Date(tempTime.getTime() +  5 * 60 * 1000);
                }
            },

            /**
             * 定时获取最新数据
             */
            setTimer(){
                this.timer = setInterval( ()=> {
                    this.getLastData();
                }, 5000); 
            },

            /**
             * 获取最新的数据,注意数据格式：[{'time':'2018-10-30 00:00:00','value':1000},{}]
             */
            getLastData(){
                this.dynamicDatas.push({'time':dateFormatFullString(new Date()),'value':parseInt(1000 + Math.random() * 200 - 100)});
            },
        }
    }
    
</script>

<style>

</style>
